import * as d3 from "d3";
import emitter from "../utils/eventbus";
import { appendAxis } from "./canvas";
import { drawLine, drawCurve } from "./line";
import { drawXAxis, drawPropXAxis, drawPropTextXAxis } from "./axis";
/**
 * 
 * @param $ dom
 * @param posi 定位
 * @param topLine 分割线
 */
export function drawLane($: any, posi: [], topLine: number = 5) {
    let id: string = $.attr("id");
    // let canvasWidth = $.node().getBoundingClientRect().width
    let canvasHeight = $.node().getBoundingClientRect().height
    let partition = $.append("g")
        .attr("transform", `translate(${0}, ${0})`);
    let lane = partition.selectAll("rect")
        .data(posi)
        .enter()
        .append("g")
        .attr("class", "partition-group")
    let x :number = 0;
    for (let i: number = 0; i < posi[0].count ; i++) {
        lane.append("rect")
        .attr("x", function (d) { return d.x + x; })
        .attr("y", function (d) { return d.y; })
        .attr("width", function (d) { return d.width; })
        .attr("height", function (d) { return d.height; })
        .attr("fill", "none")
        .attr("stroke", "black")
        console.log(posi[0].width)
        x+=posi[0].width
    }


    emitter.on(id, (transform: any) => {
        partition.attr("transform", transform);
        partition.attr("stroke-width", 1 / transform.k);
    });

    return lane;
}